<script>
    Vue.component('stock-warehouse', {
        template: `
<div class="stock-product-com">
    <el-row :gutter="20">
          <el-col :span="16">
              <div class="product-search">
                <el-form :inline="true" v-model="houseSearchForm" class="form-inline houseSearchForm">
                    <el-form-item size="mini">
                        <el-input v-model="houseSearchForm.keywords" clearable @keyup.enter.native="search" placeholder="仓库名称关键字"></el-input>
                    </el-form-item>
                    <el-form-item size="mini">
                       <el-button type="primary" @click="search">查询</el-button>
                       <el-button type="primary" @click="getAll">全部数据</el-button>
                    </el-form-item>
                </el-form>
              </div>
          </el-col>
          <el-col :span="8">
              <div class="t-r">
                  <el-button type="primary" size="mini" @click="houseAdd"><i class="el-icon-plus"/> 添加仓库</el-button>
                  <el-button type="success" size="mini" @click="houseExport" v-if="false"><i class="el-icon-download"/> 结果导出</el-button>
              </div>
          </el-col>
    </el-row>
    <!-- 仓库表格 ---->
    <div class="house-list">
     <el-table
        :data="houseListData"
        border
        style="width: 100%">
         <el-table-column
          prop="index"
          label="序号"
          align="center"
          width="60">
          <template slot-scope="scope">
            <span>#{{indexCal(scope.$index)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          label="仓库名称">
        </el-table-column>
        <el-table-column
          prop="state"
          align="center"
          label="状态">
          <template slot-scope="scope">
               <el-tag type="success" v-if="scope.row.state == 1" size="small">可用</el-tag>
               <el-tag type="info" size="small" v-else>不可用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_time"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="memo"
          align="center"
          label="操作">
            <template slot-scope="scope">
               <el-button type="text" v-if="currentTally.role!='accountant'" @click="editRecord(scope.$index,scope.row)">修改</el-button>
               <el-divider direction="vertical"></el-divider>
               <el-button type="text" v-if="currentTally.role!='accountant'" @click="delRecord(scope.$index,scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页------>
    <p style="margin-top: 10px;text-align: center">
        <el-pagination
        background
        layout="prev, pager, next, total"
        :page-size="houseListPage.pageSize"
        :total="houseListPage.totalCount"
        @current-change="handlePageChange"
        >
        </el-pagination>
    </p>
    <!--模态框表单---->
    <stock-warehouse-form :dialogShow="houseDialog" :formRow="houseForm" @modalClose="houseModalClose"></stock-warehouse-form>
</div>
    `,
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally () {
                return this.$store.state.currentTally
            },
            userData () {
                return this.$store.state.userData
            },
        },
        data:function(){
            return {
                houseListData:[],
                houseSearchForm:{
                    keywords:'',
                },
                houseForm:{}, // 当前要操作的仓库
                houseDialog:false,
                currentPage:1,
                houseListPage:{
                    pageSize:10,
                    totalCount:0,
                },
            }
        },
        methods:{
            initData() {
                this.currentPage = 1;
                this.getList()
            },
            handlePageChange(currentPage){
                this.currentPage = currentPage;
                this.getList()
            },
            getList() {
                let that = this
                let getUrl = '/api/stock-warehouse/lists'

                // 参数拼接
                that.houseSearchForm.tally_id = that.currentTallyId
                that.houseSearchForm.page = that.currentPage

                axios.get(getUrl,{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: that.houseSearchForm
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.houseListData = res.data.data.data
                        that.houseListPage = res.data.data['pageInfo']
                        if(that.houseListData.length === 0 && that.currentPage>1) {
                            that.$message({
                                message: '没有数据了~',
                                type: 'warning'
                            });
                        }
                    }else{
                        that.$message({
                            type: 'error',
                            message: '获取失败:'+res.data.error_message
                        })
                    }
                })
            },
            search() {
                this.currentPage = 1
                this.getList()
            },
            getAll() {
                this.currentPage = 1
                this.houseSearchForm = {}
                this.getList()
            },
            houseExport() {
                console.log('houseExport')
            },
            houseModalClose(closeType) {
                if(closeType === 'refresh') {
                    // 刷新当前列表 因为可能有数据更新
                    this.getList()
                }
                this.houseDialog = false
            },
            houseAdd() {
                this.houseForm = {}
                this.houseDialog = true;
            },
            editRecord(index,row) {
                this.houseForm = JSON.parse(JSON.stringify(row))
                this.houseDialog = true;
            },
            delRecord(index,row){
                let that = this;
                this.$confirm('确定要删除该行记录', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action === 'confirm') {
                            let postUrl = '/api/stock-warehouse/del'
                            axios.post(postUrl,{id:row['id'],tally_id:that.currentTallyId},{
                                headers: {'token': loginToken},
                            }).then(function(res) {
                                if(res.data.status === 'success'){
                                    that.$message({
                                        type: 'success',
                                        message: '删除成功~'
                                    })
                                    that.houseListData.splice(index, 1)
                                }else{
                                    that.$message({
                                        type: 'error',
                                        message: res.data.error_message
                                    })
                                }
                            })
                        }
                    }
                })
            },
            indexCal(index) {
                return (this.currentPage-1) * this.houseListPage.pageSize +  parseInt(index) + 1
            }
        }
    })
</script>

<style>
    .t-r{text-align: right}
</style>
